<template>
  <div>
    <canvas></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import {
  Engine,
  Scene,
  ArcRotateCamera,
  Vector3,
  Color3,
  MeshBuilder,
  HemisphericLight,
  StandardMaterial
} from '@babylonjs/core'

onMounted(() => {
  const canvas = document.querySelector('canvas')! as HTMLCanvasElement
  // 创建引擎
  const engine = new Engine(canvas, true)
  // 创建场景
  const scene = new Scene(engine)
  // 创建相机
  const Camera = new ArcRotateCamera('camera', 0, 0, 10, Vector3.Zero(), scene)
  // 运用相机和画布关联起来
  Camera.attachControl(canvas, true)
  // 添加灯光到场景中(环境灯)
  const light = new HemisphericLight('light', new Vector3(1, 1, 1), scene)
  scene.ambientColor = new Color3(1, 1, 1)
  //创建材质
  const Materal = new StandardMaterial('myMaterial', scene)
  Materal.ambientColor = new Color3(1, 0, 0) //漫反射颜色
  const box = MeshBuilder.CreateBox(
    'box',
    {
      width: 2,
      height: 2,
      depth: 2,
      sideOrientation: 2
    },
    scene
  )
  box.material = Materal
  // 渲染处理
  engine.runRenderLoop(() => {
    scene.render()
  })
  window.addEventListener('resize', function () {
    engine.resize()
  })
})
</script>

<style></style>
